<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="app-container-header">
        <el-form>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item>
                <el-input v-model="queryForm.blurry" placeholder="请输入统计类型名称" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item>
                <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-container-button">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAdd"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="toDelete"
        >
          删除
        </el-button>
      </div>
      <div class="app-container-table">
        <el-table
          ref="table"
          v-loading="loading"
          :data="dataList"
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column :show-overflow-tooltip="true" width="200" prop="name" label="数据源名称" />
          <el-table-column :show-overflow-tooltip="true" prop="dataSource" label="数据源" />
          <el-table-column :show-overflow-tooltip="true" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">待办</span>
              <span v-if="scope.row.type === 2">已完成</span>
              <span v-if="scope.row.type === 3">已终止</span>
              <span v-if="scope.row.type === 4">处理中</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="130px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)" />
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="toDelete(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="queryForm.page"
          :page-size="queryForm.size"
          :total="pagerSize"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <carousel-entity ref="entity" @fetch-data="fetchData" />
    </el-card>
  </div>
</template>

<script>
import CarouselEntity from '@/views/system/statistics/entity';
import { queryAllByPage, deleteObject } from '@/api/statistics/index';
export default {
  name: 'StatisticsIndex',
  components: { CarouselEntity },
  data() {
    return {
      loading: false,
      dataList: [],
      pagerSize: 0,
      rowId: [],
      queryForm: {
        page: 1,
        size: 10,
        blurry: ''
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    toAdd() {
      this.$refs.entity.openEntity();
    },
    toQuery() {
      this.queryForm.page = 1;
      this.initData();
    },
    toDelete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowId = [];
        this.rowId.push(data.id);
        this.$confirm('此操作将永久删除' + data.title + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteObject(this.rowId).then(res => {
            this.$message.success('删除成功！');
            this.initData();
            this.rowId = [];
          }).catch(() => {
            this.$message.error('删除失败！');
          });
        }).catch(() => {
          this.$message.success('取消删除成功！');
        });
      } else {
        if (this.rowId === null || this.rowId.length === 0) {
          this.$message.info('请选择删除项！');
        } else {
          this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteObject(this.rowId).then(res => {
              this.$message.success('删除成功！');
              this.initData();
              this.rowId = [];
            }).catch(() => {
              this.$message.error('删除失败！');
            });
          }).catch(() => {
            this.$message.success('取消删除成功！');
          });
        }
      }
    },
    selectionChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.rowId = [];
      } else {
        this.rowId = val.map((res) => {
          return res.id;
        });
      }
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
    },
    toEdit(data) {
      this.$refs.entity.openEntity(data);
    },
    fetchData() {
      this.initData();
    },
    initData() {
      queryAllByPage(this.queryForm).then(res => {
        const { data, pagerSize } = res;
        this.pagerSize = pagerSize;
        this.dataList = data;
      }).catch(() => {
        console.log('数据初始化失败！');
      });
    }
  }
};
</script>

<style scoped>
.app-container-header{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.app-container-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin-top: 15px;
}
</style>
